<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        挂载点元素，该元素下的内容由Vue去管理
     -->
    <div id="app">
        <h2>{{ msg }}</h2>

        <button @click="count++">{{ count }}</button>
    </div>

    <!-- 
        引入 Vue 核心类库

        window.Vue 是一个构建函数
     -->
    <script src="./lib/vue2.global.js"></script>

    <script>
        /**
         * 通过 new Vue() 来创建实例，返回值为根组件实例
         */
        const vm = new Vue({
            // el 用于设置挂载点元素，可以是一个DOM对象，也可以是一个css选择器
            //      el: document.querySelector('#app')
            //      el: '#app'
            el: '#app',

            // data 选项，用于初始化响应式数据，该对象的每个属性都会挂载到当前Vue的实例对象上，
            //      可以直接通过模板语法，在模板中使用
            //      该选项在内部会挂载到实例属性上，名字叫做 $data
            //      该选项内部设置的 msg、count 为和能通过 实例 vm 直接获取到？？
            //          源码中，对 data 的内容做 Object.keys() 得到一个 key 的数组
            //                 在循环该数组，循环内部，当 key 通过 Object.defineProperty 代理到 实例 vm 上
            data: {
                msg: 'Hello Vue2',
                count: 10
            }
        })

        console.log('vm', vm)

        // function Vue(options) {
        //     const obj = {}

        //     obj.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el

        //     obj.$data = options.data

        //     // Object.
        //     Object.defineProperty(obj, 'msg', {
        //         get() {

        //         },

        //         set() {

        //         }
        //     })
        //     obj.msg = options.data.msg
        //     obj.count = options.data.count
        //     return obj;
        // }
    </script>
</body>

</html>